Function: addWidgetProfile(stringWidgetTypeName, objectConfig)

Description: Creates a widget type profile that will automatically load shared properties and methods when a DC object is rendered.

Returns: Null.

Note: A widget type profile is only activated when the DC.widgetType property is set using the matching name for that profile. The configuration object syntax is strict, and must be followed exactly to ensure that profile changes are correctly imported when a DC object is rendered.

Configuration:

{

  configure: function(DC) {
    // Must return an object for setting initial properties and methods on the DC object.
    return {
      // Initial properties and methods for the widget DC object when instantiated.
    };
  },

  role: function(DC) {
    // Must return an object for setting attributes on the DC.wrapper element when rendered.
    return {
      // Attribute property: value pairs.
    };
  },

  innerRole: function(DC) {
    // Must return an object for setting attributes on the DC.container element when rendered.
    // Only applicable when DC.contentOnly is false, or when DC.exposeBounds is true.
    return {
      // Attribute property: value pairs.
    };
  },

  afterFetch: function(DC, container) {
    // Has no return restrictions.
    // Executes directly after external content is loaded using the Fetch API.
  },

  beforeRender: function(DC, container) {
    // Has no return restrictions.
    // Executes before the widget is rendered in the DOM.
  },

  duringRender: function(DC, container) {
    // Has no return restrictions.
    // Executes while the widget is being rendered in the DOM.
  },

  afterRender: function(DC, container) {
    // Has no return restrictions.
    // Executes directly after the widget is rendered in the DOM.
  },

  beforeRemove: function(DC, container) {
    // Has no return restrictions.
    // Executes before the widget is removed from the DOM.
  },

  afterRemove: function(DC, container) {
    // Has no return restrictions.
    // Executes after the widget is removed from the DOM.
  }

}

Example:

$A.addWidgetProfile("LoginDialog", {

  // Set initial configuration properties and methods for the widget DC object when instantiated.
  // For help with DC API features and options, view: "/Help/DC API".
  configure: function(dc) {
    return {
      isModal: true,
      isAlert: false,
      exposeBounds: true,
      forceFocus: true,
      returnFocus: true,
      exposeHiddenClose: true,
      circularTabbing: true,
      preload: true,
      preloadImages: true,
      preloadCSS: true,
      className: "modal",
      root: "body",
      append: true,
      on: "click",
      click: function(ev, dc) {
ev.stopPropagation();
      },
      // Add animation effects when a DC object is rendered or removed.
      animate: {
        onRender: function(DC, wrapper, next) {
          // Optionally add an animation effect when the component is rendered.
          // To ensure accessibility, make sure that the next() function is executed within the callback after the animation finishes.
          next();
        },
        onRemove: function(DC, wrapper, next) {
          // Optionally add an animation effect when the component is removed.
          // To ensure accessibility, make sure that the next() function is executed within the callback after the animation finishes.
          next();
        }
      },
      afterRender: function(DC) {
        // Configure actions for the login form within DC.container 
      }
    };
  },

  role: function(dc) {
    // Return the property / value object for setting the correct role and supporting attributes on DC.wrapper when rendered.
    var r = {};
    r.role = dc.isAlert ? "alertdialog" : "dialog";
    r["aria-modal"] = isModal ? "true" : "false";
    return r;
  },

  // Create a tracking variable within the profile object for use internally.
  track: [],

  // Execute after the DC object completes rendering, before the remaining lifecycle methods are invoked.
  afterRender: function(dc, container) {
    this.track.push(dc);
    if (dc.isModal)
      dc.backdrop = $A(this.backdrop)
.on({
  click: function(ev) {
    dc.remove();
    ev.stopPropagation();
  }
})
.appendTo(dc.wrapper)
.return();
  },

  // Execute after the DC object is removed from the DOM, before the remaining lifecycle methods are invoked.
  afterRemove: function(dc, container) {
    this.track.splice(this.track.length - 1, 1);
    if (this.track.length)
      dc.rerouteFocus = this.track[this.track.length - 1];
  },

  // Add a backdrop markup property that can be used when needed within the profile object.
  backdrop: '<div class="modalBackdrop">&nbsp;</div>'

});